<template>
  <div class="dynamic-background" :class="type">
    <canvas ref="canvas" class="background-canvas"></canvas>
    <div class="overlay" :style="{ opacity: overlayOpacity }"></div>
  </div>
</template>

<script>
export default {
  name: 'DynamicBackground',
  props: {
    type: {
      type: String,
      default: 'login',
      validator: value => ['login', 'register', 'forget'].includes(value)
    },
    overlayOpacity: {
      type: Number,
      default: 0.6
    }
  },
  data() {
    return {
      animationId: null,
      particles: [],
      mouse: {
        x: null,
        y: null,
        radius: 150
      }
    }
  },
  mounted() {
    this.initCanvas()
    window.addEventListener('resize', this.handleResize)
    window.addEventListener('mousemove', this.handleMouseMove)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    window.removeEventListener('mousemove', this.handleMouseMove)
    if (this.animationId) {
      cancelAnimationFrame(this.animationId)
    }
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      
      // 根据类型创建不同的粒子效果
      if (this.type === 'login') {
        this.createLoginParticles(canvas)
      } else if (this.type === 'register') {
        this.createRegisterParticles(canvas)
      } else if (this.type === 'forget') {
        this.createForgetParticles(canvas)
      }
      
      const animate = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        
        for (let i = 0; i < this.particles.length; i++) {
          this.particles[i].update(ctx, this.mouse, this.particles)
        }
        
        this.animationId = requestAnimationFrame(animate)
      }
      
      animate()
    },
    
    createLoginParticles(canvas) {
      // 登录页使用橙色系的流动粒子
      this.particles = []
      const particleCount = Math.floor(canvas.width * canvas.height / 9000)
      
      for (let i = 0; i < particleCount; i++) {
        const size = Math.random() * 5 + 1
        const x = Math.random() * (canvas.width - size * 2) + size
        const y = Math.random() * (canvas.height - size * 2) + size
        const directionX = Math.random() * 1 - 0.5
        const directionY = Math.random() * 1 - 0.5
        const color = this.getLoginColor()
        
        this.particles.push(new FlowParticle(x, y, directionX, directionY, size, color))
      }
    },
    
    createRegisterParticles(canvas) {
      // 注册页使用蓝色系的连接粒子
      this.particles = []
      const particleCount = Math.floor(canvas.width * canvas.height / 12000)
      
      for (let i = 0; i < particleCount; i++) {
        const size = Math.random() * 4 + 0.5
        const x = Math.random() * (canvas.width - size * 2) + size
        const y = Math.random() * (canvas.height - size * 2) + size
        const directionX = Math.random() * 1 - 0.5
        const directionY = Math.random() * 1 - 0.5
        const color = this.getRegisterColor()
        
        this.particles.push(new ConnectParticle(x, y, directionX, directionY, size, color))
      }
    },
    
    createForgetParticles(canvas) {
      // 忘记密码页使用紫色系的星星粒子
      this.particles = []
      const particleCount = Math.floor(canvas.width * canvas.height / 10000)
      
      for (let i = 0; i < particleCount; i++) {
        const size = Math.random() * 4 + 0.5
        const x = Math.random() * (canvas.width - size * 2) + size
        const y = Math.random() * (canvas.height - size * 2) + size
        const directionX = Math.random() * 1 - 0.5
        const directionY = Math.random() * 1 - 0.5
        const color = this.getForgetColor()
        
        this.particles.push(new StarParticle(x, y, directionX, directionY, size, color))
      }
    },
    
    getLoginColor() {
      // 橙色系渐变
      const colors = [
        '#ff6b00', // 主题橙色
        '#ff8533',
        '#ffa066',
        '#ffbb99',
        '#ffd6cc'
      ]
      return colors[Math.floor(Math.random() * colors.length)]
    },
    
    getRegisterColor() {
      // 蓝色系渐变
      const colors = [
        '#304156', // 主题蓝色
        '#3d5173',
        '#4a6290',
        '#5773ad',
        '#6484ca'
      ]
      return colors[Math.floor(Math.random() * colors.length)]
    },
    
    getForgetColor() {
      // 紫色系渐变
      const colors = [
        '#7E57C2', // 主题灰紫色
        '#9575CD',
        '#B39DDB',
        '#D1C4E9',
        '#EDE7F6'
      ]
      return colors[Math.floor(Math.random() * colors.length)]
    },
    
    handleResize() {
      const canvas = this.$refs.canvas
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      
      // 重新初始化粒子
      if (this.type === 'login') {
        this.createLoginParticles(canvas)
      } else if (this.type === 'register') {
        this.createRegisterParticles(canvas)
      } else if (this.type === 'forget') {
        this.createForgetParticles(canvas)
      }
    },
    
    handleMouseMove(event) {
      this.mouse.x = event.x
      this.mouse.y = event.y
    }
  }
}

// 登录页流动粒子类
class FlowParticle {
  constructor(x, y, directionX, directionY, size, color) {
    this.x = x
    this.y = y
    this.directionX = directionX
    this.directionY = directionY
    this.size = size
    this.color = color
    this.speedFactor = Math.random() * 0.5 + 0.2
  }
  
  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fillStyle = this.color
    ctx.fill()
    
    // 添加发光效果
    ctx.shadowBlur = 15
    ctx.shadowColor = this.color
  }
  
  // eslint-disable-next-line no-unused-vars
  update(ctx, mouse, particles) {
    // 边界检测
    if (this.x + this.size > window.innerWidth || this.x - this.size < 0) {
      this.directionX = -this.directionX
    }
    if (this.y + this.size > window.innerHeight || this.y - this.size < 0) {
      this.directionY = -this.directionY
    }
    
    // 移动粒子
    this.x += this.directionX * this.speedFactor
    this.y += this.directionY * this.speedFactor
    
    // 鼠标交互
    if (mouse.x - this.x < mouse.radius && 
        mouse.x - this.x > -mouse.radius && 
        mouse.y - this.y < mouse.radius && 
        mouse.y - this.y > -mouse.radius) {
      
      const dx = mouse.x - this.x
      const dy = mouse.y - this.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      const forceDirectionX = dx / distance
      const forceDirectionY = dy / distance
      
      // 计算鼠标距离的反比例
      const force = (mouse.radius - distance) / mouse.radius
      
      // 应用力
      this.directionX += forceDirectionX * force * 0.6
      this.directionY += forceDirectionY * force * 0.6
    }
    
    // 绘制粒子
    this.draw(ctx)
  }
}

// 注册页连接粒子类
class ConnectParticle {
  constructor(x, y, directionX, directionY, size, color) {
    this.x = x
    this.y = y
    this.directionX = directionX
    this.directionY = directionY
    this.size = size
    this.color = color
    this.speedFactor = Math.random() * 0.3 + 0.1
  }
  
  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
    ctx.fillStyle = this.color
    ctx.fill()
  }
  
  update(ctx, mouse, particles) {
    // 边界检测
    if (this.x + this.size > window.innerWidth || this.x - this.size < 0) {
      this.directionX = -this.directionX
    }
    if (this.y + this.size > window.innerHeight || this.y - this.size < 0) {
      this.directionY = -this.directionY
    }
    
    // 移动粒子
    this.x += this.directionX * this.speedFactor
    this.y += this.directionY * this.speedFactor
    
    // 鼠标交互
    if (mouse.x - this.x < mouse.radius && 
        mouse.x - this.x > -mouse.radius && 
        mouse.y - this.y < mouse.radius && 
        mouse.y - this.y > -mouse.radius) {
      
      const dx = mouse.x - this.x
      const dy = mouse.y - this.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      const forceDirectionX = dx / distance
      const forceDirectionY = dy / distance
      
      // 计算鼠标距离的反比例
      const force = (mouse.radius - distance) / mouse.radius
      
      // 应用力
      this.directionX += forceDirectionX * force * 0.6
      this.directionY += forceDirectionY * force * 0.6
    }
    
    // 绘制粒子
    this.draw(ctx)
    
    // 绘制连接线
    for (let i = 0; i < particles.length; i++) {
      const other = particles[i]
      if (other === this) continue
      
      const dx = this.x - other.x
      const dy = this.y - other.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      if (distance < 100) {
        ctx.beginPath()
        ctx.strokeStyle = this.color
        ctx.lineWidth = 0.2
        ctx.globalAlpha = (100 - distance) / 100
        ctx.moveTo(this.x, this.y)
        ctx.lineTo(other.x, other.y)
        ctx.stroke()
        ctx.globalAlpha = 1
      }
    }
  }
}

// 忘记密码页星星粒子类
class StarParticle {
  constructor(x, y, directionX, directionY, size, color) {
    this.x = x
    this.y = y
    this.directionX = directionX
    this.directionY = directionY
    this.size = size
    this.color = color
    this.speedFactor = Math.random() * 0.3 + 0.2
    this.rotation = Math.random() * Math.PI * 2
    this.rotationSpeed = Math.random() * 0.02 - 0.01
    this.twinkleRate = Math.random() * 0.05 + 0.02
    this.alpha = Math.random() * 0.5 + 0.5
    this.alphaChange = this.twinkleRate
  }
  
  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(this.rotation)
    ctx.globalAlpha = this.alpha
    
    // 绘制星星
    ctx.beginPath()
    for (let i = 0; i < 5; i++) {
      const outerX = this.size * Math.cos(i * Math.PI * 2 / 5)
      const outerY = this.size * Math.sin(i * Math.PI * 2 / 5)
      const innerX = this.size * 0.4 * Math.cos((i * Math.PI * 2 / 5) + (Math.PI / 5))
      const innerY = this.size * 0.4 * Math.sin((i * Math.PI * 2 / 5) + (Math.PI / 5))
      
      if (i === 0) {
        ctx.moveTo(outerX, outerY)
      } else {
        ctx.lineTo(outerX, outerY)
      }
      
      ctx.lineTo(innerX, innerY)
    }
    ctx.closePath()
    
    ctx.fillStyle = this.color
    ctx.shadowBlur = 10
    ctx.shadowColor = this.color
    ctx.fill()
    
    ctx.restore()
  }
  
  // eslint-disable-next-line no-unused-vars
  update(ctx, mouse, particles) {
    // 边界检测
    if (this.x + this.size > window.innerWidth || this.x - this.size < 0) {
      this.directionX = -this.directionX
    }
    if (this.y + this.size > window.innerHeight || this.y - this.size < 0) {
      this.directionY = -this.directionY
    }
    
    // 移动粒子
    this.x += this.directionX * this.speedFactor
    this.y += this.directionY * this.speedFactor
    
    // 旋转星星
    this.rotation += this.rotationSpeed
    
    // 闪烁效果
    this.alpha += this.alphaChange
    if (this.alpha >= 1) {
      this.alpha = 1
      this.alphaChange = -this.twinkleRate
    } else if (this.alpha <= 0.5) {
      this.alpha = 0.5
      this.alphaChange = this.twinkleRate
    }
    
    // 鼠标交互
    if (mouse.x - this.x < mouse.radius && 
        mouse.x - this.x > -mouse.radius && 
        mouse.y - this.y < mouse.radius && 
        mouse.y - this.y > -mouse.radius) {
      
      const dx = mouse.x - this.x
      const dy = mouse.y - this.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      const forceDirectionX = dx / distance
      const forceDirectionY = dy / distance
      
      // 计算鼠标距离的反比例
      const force = (mouse.radius - distance) / mouse.radius
      
      // 应用力，向远离鼠标的方向移动
      this.directionX -= forceDirectionX * force * 0.5
      this.directionY -= forceDirectionY * force * 0.5
      
      // 增加旋转速度
      this.rotationSpeed += force * 0.02
    }
    
    // 绘制粒子
    this.draw(ctx)
  }
}
</script>

<style scoped>
.dynamic-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.background-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f2f5 0%, #e6e9ef 100%);
}

.login .overlay {
  background: linear-gradient(135deg, #fff1e6 0%, #ffe0cc 100%);
}

.register .overlay {
  background: linear-gradient(135deg, #e6eaf0 0%, #d1d8e6 100%);
}

.forget .overlay {
  background: linear-gradient(135deg, #EDE7F6 0%, #D1C4E9 100%);
}
</style> 